<template>
  <div class="app-container dis">
    <el-card class="box-card left" style="overflow: auto">
      <div style="overflow: auto">
        <!--  操作按钮    -->
        <el-row>
          <el-col>
            <el-button type="primary" @click="openLeft(1)">新建</el-button>
            <el-button type="primary" @click="openLeft(2)">修改</el-button>
            <el-button type="danger" @click="delLeft">删除</el-button>
          </el-col>
        </el-row>
        <!--  表格    -->
        <el-table
          ref="singleTable"
          :data="tableData"
          highlight-current-row
          style="width: 100%"
          @current-change="handleCurrentTable"
        >
          <el-table-column
            width="60"
            align="center"
          >
            <template slot-scope="scope">
              <el-radio
                v-model="leftId"
                :label="scope.row.id"
              />
            </template>
          </el-table-column>
          <el-table-column
            property="name"
            label="字典名称"
            align="left"
          />
        </el-table>
        <!--   分页   -->
        <el-pagination
          :page-size="10"
          :current-page="offset"
          layout="total, prev, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-card class="box-card right">
      <div>
        <!--  右侧顶部搜索   -->
        <el-form :inline="true" :model="formRightInline">
          <el-form-item>
            <el-input v-model="formRightInline.name" placeholder="请输入字典项名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getRightList">查询</el-button>
            <el-button type="primary" @click="addRight">新建</el-button>
          </el-form-item>
        </el-form>
        <!--  表格    -->
        <el-table
          ref="rightTable"
          :data="tableRight"
        >
          <el-table-column
            type="index"
            align="center"
            width="50"
          />
          <el-table-column
            property="name"
            label="字典项名称"
            align="center"
          />
          <el-table-column
            property="value"
            label="字典项值"
            align="center"
          />
          <el-table-column
            property="sort"
            label="排序号"
            align="center"
            width="100"
          />
          <el-table-column
            property="created_at"
            label="创建时间"
            align="center"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="200"
          >
            <template slot-scope="scope">
              <el-button
                type="warning"
                @click="editRight(scope.row)"
              >
                修改
              </el-button>
              <el-button
                type="danger"
                @click="delRight(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--   分页   -->
        <el-pagination
          style="float: right;"
          :page-size="10"
          :current-page="formRightInline.offset"
          layout="total, prev, pager, next, jumper"
          :total="totalRight"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
        />
      </div>
    </el-card>
    <!--  左侧新增/修改弹窗  -->
    <left
      :title="leftTitle"
      :dialog-visible="leftFlag"
      :rule-form="dialogData"
      @close="closeLeft"
      @confirm="confirmLeft"
    />
  </div>
</template>

<script>
import left from './component/left'
import { dictionaryList, deleteDictionary } from '@/api/dictionary'

export default {
  name: 'dictionarys.dictionary',
  components: {
    left
  },
  data() {
    return {
      offset: 0,
      total: 0,
      totalRight: 0,
      limit: 10,
      leftId: '',
      tableData: [], // 左侧字典名列表数据
      leftTitle: '新增', // 左侧弹出框标题
      leftFlag: false, // 左侧弹出框标识
      // 弹窗数据
      dialogData: {
        name: '',
        value: '',
        sort: '',
        remark: '',
        pid: 0
      },
      // 左侧选中数据
      ruleForm: {
        name: '',
        value: '',
        sort: '',
        remark: '',
        pid: 0
      },
      //  右侧表格搜索
      formRightInline: {
        name: '',
        limit: 10,
        pid: '',
        offset: 0
      },
      // 右侧表格数据
      tableRight: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    /**
     * @description: 获取列表数据
     * @author: hst
     */
    getList() {
      const data = {
        offset: this.offset,
        limit: this.limit
      }
      dictionaryList(data).then(res => {
        this.tableData = res.data.dictionaries
        this.total = res.data.total
        if (res.data.dictionaries.length > 0 && !this.leftId) {
          this.leftId = res.data.dictionaries[0].id
          this.ruleForm = res.data.dictionaries[0]
          this.formRightInline.pid = res.data.dictionaries[0].id
          dictionaryList(this.formRightInline).then(res1 => {
            this.tableRight = res1.data.dictionaries
            this.totalRight = res1.data.total
          })
        } else {
          this.getRightList()
        }
      })
    },
    /**
     * @description: 删除右侧列表数据
     * @author: hst
     */
    delRight(id) {
      this.$confirm('是否要删除此条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDictionary({ id }).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getRightList()
        })
      })
    },
    /**
     * @description: 删除左侧列表数据
     * @author: hst
     */
    delLeft() {
      if (!this.leftId) {
        this.$message({
          message: '请选择要删除的数据',
          type: 'warning'
        })
        return
      }
      this.$confirm('是否要删除此条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDictionary({ id: this.leftId }).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        })
      })
    },
    handleSizeChange(val) {
      this.limit = val
      this.getList()
    },
    handleSizeChange1(val) {
      this.formRightInline.limit = val
      this.getRightList()
    },
    handleCurrentChange(val) {
      this.offset = val
      this.getList()
    },
    handleCurrentChange1(val) {
      this.formRightInline.offset = val
      this.getRightList()
    },
    /**
     * @description: 打开左侧弹窗
     * @author: hst
     * @param: 1:新增， 2: 编辑
     */
    openLeft(num) {
      this.leftTitle = num === 1 ? '新增' : '编辑'
      this.leftFlag = true
      if (num === 2) {
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].id === this.leftId) {
            this.ruleForm = JSON.parse(JSON.stringify(this.tableData[i]))
            this.dialogData = JSON.parse(JSON.stringify(this.tableData[i]))
            return
          }
        }
      } else {
        this.dialogData = {
          name: '',
          value: '',
          sort: '',
          remark: '',
          pid: 0
        }
      }
    },
    closeLeft() {
      // 重置表单
      this.dialogData = {
        name: '',
        value: '',
        sort: '',
        remark: '',
        pid: 0
      }
      this.leftFlag = false
    },
    confirmLeft() {
      this.leftFlag = false
      this.getList()
    },
    // 选中左侧列表行
    handleCurrentTable(e) {
      if (!e.id) return
      this.leftId = e.id
      this.ruleForm = e
      this.dialogData = JSON.parse(JSON.stringify(e))
      this.getRightList()
    },
    /**
     * @description: 获取右侧列表数据
     * @author: hst
     */
    getRightList() {
      const obj = Object.assign({}, this.formRightInline)
      obj.pid = this.leftId
      dictionaryList(obj).then(res => {
        this.tableRight = res.data.dictionaries
        this.totalRight = res.data.total
      })
    },
    /**
     * @description: 新增右侧列表数据
     * @author: hst
     */
    addRight() {
      this.leftTitle = '新增'
      this.dialogData = {
        name: '',
        value: '',
        sort: '',
        remark: '',
        pid: this.leftId
      }
      // this.ruleForm.pid = this.leftId
      this.leftFlag = true
    },
    /**
     * @description: 编辑右侧列表数据
     * @author: hst
     */
    editRight(item) {
      this.leftTitle = '编辑'
      this.dialogData = JSON.parse(JSON.stringify(item))
      this.leftFlag = true
    }
  }
}
</script>

<style lang="scss" scoped>
.dis {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /*min-height: 100%;*/
  /*background-color: #F8F8F8;*/
  .left {
    width: 380px;
    /*height: 100%;*/
    /*height: 830px;*/
  }

  .right {
    flex: 1;
    margin-left: 20px;
  }
}
</style>
